<template>
  <div
    class="operation-bar"
    :style="{
      justifyContent: 'space-between'
    }">
    <div class="operation-bar__left flex-1 justify-between">
      <a-button @click="$router.push({ name: 'NodeList' })">
        <i-icons-node-list />
        节点管理
      </a-button>
      <section class="flex gap-x-4">
        <div
          v-show="error"
          class="text-danger bg-#FFECE8 px-2 py-2px rounded-26px text-xs cursor-pointer flex gap-x-1 text-xs/5"
          @click="emit('error-click')">
          <i-icons-error />
          错误：{{ error }}
        </div>
        <div
          v-show="warning"
          class="text-primary bg-#E8F3FF px-2 py-2px rounded-26px cursor-pointer flex gap-x-1 text-xs/5"
          @click="emit('warning-click')">
          <i-icons-suggest />建议：{{ warning }}
        </div>
      </section>
    </div>

    <div class="operation-bar__right ml-4">
      <status-tips />
      <a-button @click="emit('fullscreen')">
        <i-icons-full-screen />
        全屏</a-button
      >
      <a-button
        type="primary"
        :disabled="diff.length === 0"
        @click="emit('save-config')">
        保存配置</a-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
// import type { FilterItem } from '@/components/business/src/StrongSearch'
import StatusTips from './StatusTips.vue'
import { type CascaderDiff } from '@/components/Cascader'
interface IEmit {
  (event: 'update:viewType', value: 'grid' | 'list'): void
  (event: 'fullscreen'): void
  (event: 'save-config'): void
  (event: 'error-click'): void
  (event: 'warning-click'): void
}

interface IProps {
  error?: number
  warning?: number
  diff: CascaderDiff[]
}

const emit = defineEmits<IEmit>()
defineProps<IProps>()
</script>

<style scoped lang="less">
.operation-bar {
  @apply flex items-center justify-between;
  .default_strong_search {
    max-width: calc(100% - 532px);
  }
  &__left {
    @apply flex items-center gap-x-4;
    .a-button {
      @apply m-0;
    }
  }
  &__right {
    @apply flex items-center gap-x-4;
  }
}
</style>
